// 货物箱颜色
@goods-color: #c64d0f;

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-weight: lighter;
    position: relative;
    overflow: hidden;
}

.warehouse {
    width: 800px;
    height: 600px;
    padding: 5px;
    text-align: center;
    background: rgba(0, 0, 0, 0.07);
    box-sizing: content-box;
    border: 5px dashed #ccc;
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(4, 200px);
    grid-template-rows: repeat(5, 100px);

    div.active {
        background: #e0e0e0;
        box-shadow: inset 3px 3px 6px #bebebe,
            inset -3px -3px 6px #ffffff;
        // background: rgba(10, 34, 121, 0.313);
    }

    div.in {
        background: linear-gradient(to right, #c64d0f 50%, #b73904 52%, #c74b10 72%, #b73904 92%, #c64d0f 94%);
        background-size: 20px;
        background-repeat: repeat-x;
        border: 4px solid #c64d0f;
        box-shadow: inset 0px 0px 2px #b73904,
            inset 0px 0px 2px #b73904;
        cursor: pointer;
        box-sizing: border-box;
    }
}

.goods-wrap {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.07);
    border: 3px dashed #ccc;

    .goods {
        width: 200px;
        height: 100px;
        position: absolute;
        background: linear-gradient(to right, #c64d0f 50%, #b73904 52%, #c74b10 72%, #b73904 92%, #c64d0f 94%);
        background-size: 20px;
        background-repeat: repeat-x;
        border: 4px solid #c64d0f;
        box-shadow: inset 0px 0px 2px #b73904,
            inset 0px 0px 2px #b73904;
        cursor: pointer;
        box-sizing: border-box;
    }
}